<template>
  <div class="app-container">
    <BasicList listName="页面管理" className="formPage" mainKeyName="pageId" :listId="listId" :total="state.total"
      :loading="state.loading" :tableData="state.tableData" @handleQuery="handleQuery"
      @onOpenEditModule="handleGoFormEdit" @onOpenAddModule="handleGoForm">
      <template v-slot:listBtn="slotProps">
        <el-tooltip class="box-item" effect="dark" content="预览" placement="top-start">
          <el-button type="info" size="small" circle v-auth="`formPage:preview`" @click="onTableRowPreview(slotProps)">
            <SvgIcon :size="12" name="elementView" />
          </el-button>
        </el-tooltip>
      </template>
    </BasicList>
    <Preview ref="previewModuleRef" :listId="listId" />
  </div>
</template>

<script lang="ts" setup name="Partner">
import {
  reactive,
  onMounted,
  getCurrentInstance,
  onUnmounted,
  ref
} from "vue";
import { get, } from "@/api/public/basic";
import BasicList from "@/components/basicList/index.vue";
import Preview from "./component/preview.vue";
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance() as any;
const listId = 'hQyTUtB5WjC' // 页面表id
const previewModuleRef = ref();
const router = useRouter();
const state = reactive({
  // 遮罩层
  loading: true,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 弹出层标题
  title: "",
  // 表格数据
  tableData: [],
  // 总条数
  total: 0,
});

/** 查询列表 */
const handleQuery = (params: any) => {
  state.loading = true;
  // 如果state.queryParams中有空值，则删除
  Object.keys(params).forEach((key) => {
    if (!params[key]) {
      delete params[key];
    }
  });
  get(params, listId).then((response: any) => {
    state.tableData = response.data.result;
    state.total = response.data.total;
    state.loading = false;
  });
};


/** 跳转表单设计页面 */
const handleGoForm = () => {
  // 新开标签
  // proxy.$router.push({
  //   path: "/page/edit",
  // });
  const currentPath = router.resolve({ name: '/page/edit' }).href;
  // 在新标签页中打开
  window.open(currentPath, '_blank');
};

const handleGoFormEdit = (row: object) => {
  proxy.$router.push({
    path: "/page/edit",
    query: {
      pageId: row.pageId,
    },
  });
}

const onTableRowPreview = (row: any) => {
  previewModuleRef.value.openDialog(row.row.pageId);
}


// 页面加载时
onMounted(() => {

});
// 页面卸载时
onUnmounted(() => {
  proxy.mittBus.off("onEditPartnerModule");
});
</script>